<!-- 上传按钮 -->
<template>
  <div class="upload">
    <el-upload
      ref="upload"
      class="upload-demo"
      :class="{ picImg: UpType == 'word' }"
      :list-type="imageType"
      :file-list="fileList"
      :limit="limit"
      :accept="acceptType"
      action=""
      :before-upload="beforeUpload"
      :on-exceed="handleLimit"
      :on-remove="removeFile"
      :http-request="
        (file) => {
          handleUpload(file, upload.data);
        }
      "
    >
      <i v-if="showIcon" class="el-icon-plus avatar-uploader-icon"></i>
      <div v-if="false" :class="{ cla: iscla }" class="student">
        上传学生证
      </div>
      {{ UpType == "word" ? "上传任务申领书" : "" }}
      <div
        slot="tip"
        class="el-upload__tip"
        :class="{ userCl: UpType == 'word' }"
      >
        {{
          UpType == "word"
            ? "最多1个，10MB以内，word/zip/rar格式"
            : "最多1个，10MB以内，.jpg, .gif, .png, .jpeg格式"
        }}
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
    },
    fileL: {
      type: Array,
    },
    acceptType: {
      type: String,
    },
    imageType: {
      type: String,
      default: "text",
    },
    showIcon: {
      type: Boolean,
    },
    UpType: {
      type: String,
    },
    iscla: {
      type: Boolean,
    },
  },
  data() {
    // 这里存放数据
    return {
      limit: 1,
      fileList: [],
      upload: {
        url: this.url,
        data: {
          file: null,
        },
      },
      
    };
  },
  created() {
    this.fileList = this.fileL;
  },
  methods: {
    beforeUpload(file) {
      console.log('file',file)
      let fileTylist = [
        "application/msword", //.doc
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document", //docx
        "application/octet-stream", //.rar
        "application/x-zip-compressed", //.zip
      ];

      var isLt = file.size / 1024 / 1024 < 10;
      if (this.UpType == "word") {
        var isWord = fileTylist.includes(file.type)||(file.type==''&&(file.name.slice(-4)=='.rar'||file.name.slice(-4)=='.RAR'));
        if (!isWord) {
          this.$message.error("只能上传.doc/.docx/zip/rar格式的文件");
        }
      } else {
        var isJPG = file.type.indexOf(this.UpType) != -1;
        if (!isJPG) {
          this.$message.error("上传图片只能是.jpg, .gif, .png, .jpeg格式!");
        }
      }
      if (!isLt) {
        this.$message.error("上传大小不能超过10MB!");
      }
      return (this.UpType == "word" ? isWord : isJPG) && isLt;
    },
    handleLimit() {
      this.$message.warning("当前限制上传 1 个文件,请删除原文件后重新上传");
    },
    handleUpload(dat, params) {
      console.log("params", dat, params);
      let formD = new FormData();
      formD.append("file", dat.file);
      this.$axios.post(this.upload.url, formD).then((res) => {
        if (res.data.code == 0) {
          this.$message.success(res.data.msg);
          this.$emit("afterUploaded", res.data.data);
          this.$forceUpdate();
        } else {
          this.fileList = [];
        }
      });
    },
    removeFile() {
      this.$emit("removeFlie");
    },
  },
};
</script>

<style lang="less" scoped>
.upload {
  .content {
    text-align: center;
    height: 100%;
    background: white;
  }
  .el-upload-list {
    text-align: left;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .upload-demo {
    ::v-deep .el-upload.el-upload--text {
      border-radius: 2px;
      color: #1169ff;
      border-bottom: 1px solid #1169ff;
      font-size: 14px;
      height: 19px;
      line-height: 19px;
    }
    .userCl {
      margin-top: -20px;
      color: #f95b5b;
      padding-top: 4px;
    }
    .el-icon-plus.avatar-uploader-icon {
      position: relative;
    }
    .student {
      position: absolute;
      top: 24%;
      left: 8%;
      font-size: 12px;
      font-weight: 400;
      color: #000000;
      opacity: 0.4;
    }
    .cla {
      position: absolute;
      left: 37%;
    }
  }
  .picImg {
    margin-top: -12px;
  }
}
@media screen and (max-width: 376px) {
  .upload {
    .upload-demo {
      ::v-deep .el-upload.el-upload--picture-card {
        width: 100px !important;
        height: 100px !important;
        line-height: 100px !important;
        .student {
          position: absolute;
          top: 20%;
        }
        .cla {
          position: absolute;
          left: 48%;
        }
      }
      ::v-deep .el-icon-plus.avatar-uploader-icon {
        width: 100px !important;
        height: 100px !important;
        line-height: 100px !important;
      }
      ::v-deep .el-upload-list--picture-card {
        .el-upload-list__item {
          width: 100px !important;
          height: 100px !important;
          line-height: 100px !important;
        }
      }
    }
  }
}
</style>
